<!--
 * @Author: your name
 * @Date: 2020-12-28 11:54:46
 * @LastEditTime: 2021-01-04 16:27:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\H5 2010 练习\第三阶段 Vue + node\DAY 7\panda\src\components\tab-bar\index.vue
-->
<template>
  <div id="TabBar">
    <van-tabbar v-model="active" route>
      <van-tabbar-item
        v-for="route in tabNavs"
        :key="route.path"
        :icon="route.meta.icon"
        :to="route.path"
        :badge="
          route.meta.isBadge ? (totalCount > 99 ? '99+' : totalCount) : ''
        "
        >{{ route.meta.title }}</van-tabbar-item
      >
      <!-- <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
  <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
  <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
  <van-tabbar-item icon="user-o" to="/mine">我的</van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<script>
import routes from "@/router/routes";

export default {
  name: "TabBar",
  data() {
    return {
      active: 1
    };
  },
  computed: {
    tabNavs() {
      // 简写
      return routes.filter(route => route.meta && route.meta.isTab);

      // 完整写法
      // return routes.filter(route => {
      //   if (route.meta && route.meta.isTab) {
      //     return route
      //   }
      // })
    },
    totalCount() {
      return this.$store.getters["cart/totalCount"];
    }
  }
};
</script>

<style lang="scss" scoped></style>
